<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .public{
            width: 100px;
            height: 100px;
        }
        .active{
            background: red;
        }
        .noactive{
            background: blue;
        }
        .red{
            color: red;
        }
        .bold{
            font-weight: 900;
        }
        .italic{
            font-style: italic;
            font-size: 100px;
        }
    </style>
</head> 
<body>  
        <div id="app">
            <!-- 返回值来判断用哪一个值 -->
            <div class="public"  :class="isActive?'active':'noactive'">ss</div>



            <!--  利用v-bind内部的属性为true就会展示出来 如果为false 就不展示
                当需要判断的时候 需要添加{}
            -->
            <div class="public"  :class="ARR">arr</div>
            <div class="public"  :class="{red:isred,bold:isbold,italic:isitalic}">arr</div>





            <!-- 也可以利用数组的方式来写 后期方便数组方式的添加  会自动便利数组里面的每一个属性-->
            <div class="public" :class ='ISarr'>aaaa</div>
        </div>
        <script>
            const vm = new Vue({
                el:"#app",
                data(){
                    return{
                        isActive:true,
                        ARR:{
                            red:true,
                            bold:true,
                            italic:true
                        },
                            isred:true,
                            isbold:true,
                            isitalic:true,

                        ISarr:['italic' , 'bold' , 'red']
                    }
                }
            })
        </script>
</body>
</html>